
<template>
  <div class="wrap">
    <div class="img-box1">
       <el-carousel :interval="3000" type="card" height="400px">
        <el-carousel-item v-for="item in imgList" :key="item.id">
          <img :src="item.url" width="100%" height="400px" alt="">
        </el-carousel-item>
      </el-carousel>
      <el-row :gutter="20">
      <el-col :span="8">
        <el-card>
          <div class="chart-title"></div>
          <TotalPerson />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div class="chart-title">历年人数变化</div>
          <Studentchange />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div class="chart-title">昨日新增用户</div>
          <AddConpoents />
        </el-card>
        <el-card>
          <div class="chart-title">昨日浏览量</div>
          <AddBrowse />
        </el-card>
        <el-card>
          <div class="chart-title">昨日互动数</div>
          <AddInteraction />
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card>
          <div class="chart-title" ></div>
          <RegistrantsSummery />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div class="chart-title" >词云</div>
          <WordCloud />
        </el-card>
      </el-col>
    </el-row>
    </div>
  </div>
</template>
 
<script>
import WordCloud from './components/WordCloud.vue'
import AddConpoents from './components/AddConpoents.vue'
import AddBrowse from './components/AddBrowse.vue'
import AddInteraction from './components/AddInteraction.vue'
import TotalPerson from './components/TotalPerson.vue'
import RegistrantsSummery from './components/RegistrantsSummery.vue'
import Studentchange from './components/Studentchange.vue'
export default {
  name: 'Dashboard',
  components: { WordCloud, AddConpoents, TotalPerson, RegistrantsSummery, Studentchange, AddBrowse, AddInteraction},
  data() {
    return {
      imgList: [
        {
          id: '1',
          url: "images/01.png"
        },
        {
          id: '2',
          url: "images/02.png"
        },
        {
          id: '3',
          url: "images/03.png"
        }
      ]
    }
  }
}
</script>
 
<style>  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>